<template>
    <el-form :model="formData" label-width="auto" style="max-width: 600px" ref="form1Ref" :rules="rules">
  
        <el-form-item label="权限" prop="name" label-width="80px">
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item label="描述" prop="description" label-width="80px">
          <el-input v-model="formData.description" />
        </el-form-item>
        <el-form-item label-width="80px">
          <el-button type="primary" @click="submitForm()">提交</el-button>
        </el-form-item>
      </el-form>
  </template>
  <script setup lang="ts">
  import { onMounted, reactive, ref } from 'vue';
  import { permissionsApi } from '@/api';
  import { ElMessage } from 'element-plus';
  const form1Ref = ref()
  const formData = reactive<any>({ 
  name: '',
  description: ''
  })
  const submit = () => {
    
    let params={
      name: formData.name,
      description: formData.description
    }
    permissionsApi.add.call(params).then(()=>{
    ElMessage.success("添加成功")
    
  })
  
  }
  onMounted(()=>{
  
  })
  
  
  const rules = {
     name: [
    { required: true, message: '请输入名称', trigger: 'blur' },
    {
          pattern: /^[a-zA-Z]+$/,
          message: '名称只能包含英文字母',
          trigger: 'blur'
        }
    ],
    
  }
  const submitForm = async () => {
  
    await form1Ref.value.validate((valid: any, fields: any) => {
        if (valid) {
            submit()
        }
    })
  }
  </script>
  